<template>
	<view>
		<view v-if='isLogin'>
			<text>用户名：<text class="txt-value">{{username}} / UID：{{uid}}</text>  </text><br>
			<text>用户VIP等级:
				<text class="txt-value">{{grade}}级</text> 
				<text class="inline" @click="wxpay()">充值</text>
			 </text><br>
			<text>用户空间：<text class="txt-value">{{size}} GB/ 已使用:{{(usedsize/(Math.pow(1024,3))).toFixed(3)}}GB</text></text><br>
			<text v-if='level>0&&level<15'>欢迎你：<text class="txt-value">管理员</text></text><br>
			<text v-if='level==15'>欢迎你：<text class="txt-value">超级管理员</text></text><br>
			<view class="btn-view">
				<button v-if='level!=0' class='mybtn' @click="to_admin">管理员操作</button>
				<button class='mybtn' @click="changepwd">修改密码</button>
				<button class='mybtn' @click="exit">退出登陆</button>
				<button v-if='level!=15' class="mybtn danger" @click="deleteUser">删除账号</button>
			</view>
		</view>
		<view v-if='!isLogin'>
			<button @click="login">登陆</button>
			<button @click="logup">注册</button>
		</view>
	</view>
</template>

<script>
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				username:'',
				grade:'',
				size: '',
				level: 0,
				usedsize: 0,
				uid: 0,
				isLogin: null,
			}
		},
		onShow(){
			console.log("my:"+ this.userID.id);
			if (this.userID.id){
				this.isLogin=true
				this.myReq({
					url:  'get_user'
				}).then((res)=>{
					console.log(res)
					if(res.data){
						this.username=res.data.username;
						this.grade=res.data.grade;
						this.size=res.data.size;
						this.level=res.data.level;
						this.usedsize = res.data.usedsize;
						this.uid = res.data.uid;
					}else{
						uni.showToast({
							title:'未登录',
						})
						this.userID.id=''
					}
				})
			}else{
				this.userID.id=''
				this.isLogin=false
			}
			
		},
		methods: {
			wxpay(){ // 显示充值的微信图片
				uni.previewImage({
					urls:[this.baseUrl + "static/icon/wxpay.png"],
					success: () => {
						uni.showToast({
							title:"请备注UID，管理员会尽可以快的为你升级VIP"
						})
					}
				})
			},
			to_admin(){  // 跳转到管理界面
				uni.navigateTo({
					url:"../admin/admin?level="+this.level
				})
			},
			exit(){   // 退出登陆
				this.myReq({
					url:  "log_out"
				}).then((res)=>{
					console.log(res);
					uni.removeStorageSync('userID');
					this.userID.id=undefined;
					this.isLogin=false
					this.music_list = []
					console.log('remove succ');
					common.ctx.stop()
				})
			},
			login(){
				uni.navigateTo({
					url:"../login/login"
				})
			},
			logup(){
				uni.navigateTo({
					url:"../logup/logup"
				})
			},
			changepwd(){
				uni.navigateTo({
					url:"../changepwd/changepwd"
				})
			},
			deleteUser(){  // 删除用户
				uni.showModal({
					title: '提示',
					content:'【危险操作】你确定要删除账号吗？这样的话，你所有存储在服务器的音视频都会被删除，你的账号将不存在。',
					success: (res) => {
						if(res.confirm){
							
							this.myReq({
								url: "delete_user"
							}).then((res)=>{
								if(res.data){
									uni.removeStorageSync('userID');
									this.username='';
									this.grade='';
									this.size='';
									this.userID.id=""
									common.ctx.stop()
									uni.showToast({
										title:'销号成功'
									})
									this.isLogin=false
									this.music_list = []
								}else{
									uni.showToast({
										title:'销号失败'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
.mybtn{
	width: 500rpx;
	background-color: #4CD964;
	margin-bottom: 30rpx;
}
.danger{
	background-color: #DD524D;
}
.btn-view{
	width: 750rpx;
	bottom: 200rpx;
	position: fixed;
	text-align: center;
	
}
.txt-value{
	position: fixed;
	left: 300rpx;
}
.inline{
	position: fixed;
	display: inline-block;
	left: 450rpx;
	background-color: #4CD964;
	border-radius: 10rpx;
}
</style>
